<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>微信JS-SDK Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <link rel="stylesheet" href="http://demo.open.weixin.qq.com/jssdk/css/style.css?ts=1420774989">
    <base href="{$Think.RES_URL}wx/"/>
</head>
<body ontouchstart="">

<button class="btn btn_primary" id="startRecord" onclick="startRecord()">开始录音</button>

<div class="wxapi_container">
    <div class="lbox_close wxapi_form">
        <h3 id="menu-voice">音频接口</h3>
        <span class="desc">停止录音接口</span>
        <button class="btn btn_primary" id="stopRecord">stopRecord</button>
        <span class="desc">播放语音接口</span>
        <button class="btn btn_primary" id="playVoice">playVoice</button>
        <span class="desc">暂停播放接口</span>
        <button class="btn btn_primary" id="pauseVoice">pauseVoice</button>
        <span class="desc">停止播放接口</span>
        <button class="btn btn_primary" id="stopVoice">stopVoice</button>
        <span class="desc">上传语音接口</span>
        <button class="btn btn_primary" id="uploadVoice">uploadVoice</button>
        <span class="desc">下载语音接口</span>
        <button class="btn btn_primary" id="downloadVoice">downloadVoice</button>
    </div>
</div>
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    wx.config({
        debug: true,
        appId: "{$signPackage['appId']}",
        timestamp: {$signPackage['timestamp']},
        nonceStr: "{$signPackage['nonceStr']}",
        signature: "{$signPackage['signature']}",
        jsApiList: [
            'startRecord',
            'stopRecord',
            'onRecordEnd',
            'playVoice',
            'pauseVoice',
            'stopVoice',
            'uploadVoice',
            'downloadVoice',
        ]
    });
</script>
<script src="zepto.min.js"></script>
<script>

    voiceRecord = {};
    voiceRecord.status = 0;
    voiceRecord.button = document.querySelector('#startRecord');
    voiceRecord.isMicroMessenger = window.navigator.userAgent.indexOf("MicroMessenger") >= 0;
    voiceRecord.onclick = function () {
        if (!this.isMicroMessenger) {
            alert('录音功能只能在微信中使用!');
            return;
        }
        switch (this.status) {
            case 0:
                this.startRecord();
                break;
            case 1:
                this.stopRecord();
                break;
            case 3:
                this.uploadRecord();
                break;
            case 4:
                this.playRecord();
                break;
        }
    };
    voiceRecord.startRecord = function () {
        var that = this;
        wx.startRecord({
            success: function () {
                that.button.innerHTML = "正在录音...";
                that.status = 1;
            },
            cancel: function () {
                alert('用户拒绝授权录音');
            }
        });
    };
    voiceRecord.playRecord = function () {
        var that = this;
        wx.playVoice({
            localId: this.localId
        });
    };
    voiceRecord.stopRecord = function () {
        var that = this;
        wx.stopRecord({
            success: function (res) {
                that.localId = res.localId;
                that.status = 3;
                that.uploadRecord();
                that.button.innerHTML = "录音结束,正在上传...";
            },
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });
    };
    /**
     * 上传音频
     */
    voiceRecord.uploadRecord = function () {
        var that = this;
        // 4.8 上传语音
        if (that.localId == '') {
            alert('请先使用录制一段声音');
            return;
        }
        wx.uploadVoice({
            localId: that.localId,
            success: function (res) {
                alert('上传语音成功，serverId 为' + res.serverId);
                that.button.innerHTML = "已上传,点击播放!";
                that.serverId = res.serverId;
                that.status = 4;
            }
        });
    };


    function startRecord() {
        voiceRecord.onclick();
    }

    wx.ready(function () {
        // 4 音频接口
        // 4.2 开始录音
//        document.querySelector('#startRecord').onclick = function () {
//            wx.startRecord({
//                success: function (res) {
//
//                },
//                cancel: function () {
//                    alert('用户拒绝授权录音');
//                }
//            });
//        };

        // 4.3 停止录音
        document.querySelector('#stopRecord').onclick = function () {
            wx.stopRecord({
                success: function (res) {
                    voice.localId = res.localId;
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        };
        // 4.5 播放音频
        document.querySelector('#playVoice').onclick = function () {
            if (voice.localId == '') {
                alert('请先使用 startRecord 接口录制一段声音');
                return;
            }
            wx.playVoice({
                localId: voice.localId
            });
        };

        // 4.6 暂停播放音频
        document.querySelector('#pauseVoice').onclick = function () {
            wx.pauseVoice({
                localId: voice.localId
            });
        };

        // 4.7 停止播放音频
        document.querySelector('#stopVoice').onclick = function () {
            wx.stopVoice({
                localId: voice.localId
            });
        };

        // 4.8 监听录音播放停止
        wx.onVoicePlayEnd({
            complete: function (res) {
                alert('录音（' + res.localId + '）播放结束');
            }
        });

        // 4.8 上传语音
        document.querySelector('#uploadVoice').onclick = function () {
            if (voice.localId == '') {
                alert('请先使用 startRecord 接口录制一段声音');
                return;
            }
            wx.uploadVoice({
                localId: voice.localId,
                success: function (res) {
                    alert('上传语音成功，serverId 为' + res.serverId);
                    voice.serverId = res.serverId;
                }
            });
        };

        // 4.9 下载语音
        document.querySelector('#downloadVoice').onclick = function () {
            if (voice.serverId == '') {
                alert('请先使用 uploadVoice 上传声音');
                return;
            }
            wx.downloadVoice({
                serverId: voice.serverId,
                success: function (res) {
                    alert('下载语音成功，localId 为' + res.localId);
                    voice.localId = res.localId;
                }
            });
        };
    });
    // 4.4 监听录音自动停止
    wx.onVoiceRecordEnd({
        complete: function (res) {
            voice.localId = res.localId;
            alert('录音时间已超过一分钟，录音自动结束!');
        }
    });
    wx.error(function (res) {
        alert(res.errMsg);
    });
</script>
</html>